<template>
  <div class="searchcon">
    <i class="iconfont icon-close" @click="closeFloatBox()"></i>
    <input class="search-input"type="text" v-model="inputText" placeholder="请输入商品名称"/>
    <button class="search-btn" @click="doSearch()">搜索</button>
  </div>
</template>

<script>
import 'common/css/reset.css';
import 'common/css/iconfont.css';
var _mm=require("common/util/mm.js");

export default {
  name: 'headsearch',
  methods:{
    closeFloatBox(){
        
      this.$emit('closeevent');
    },
    doSearch(){
      if (this.inputText) {
        window.location.href='./list.html?keyword='+this.inputText;
      }
      
    },
  },
  data () {
    return {
      inputText:"",
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.searchcon
  width:100%
  height:40px
  background:rgb(244, 244, 244)
  display:flex
  .iconfont
    flex:0 0 30px
    font-size:30px
    display:inline-block
    color:#bfbfbf
    line-height:40px
  .search-input
    flex:1
    display:inline-block
    outline:none
    margin:5px 3px 
    padding:0 15px
    border-radius:15px
    color:#bfbfbf
  .search-btn
    flex:0 0 50px
    color:rgb(222,64, 43)
    display:inline-block
</style>
